<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test WebSocket room2</title>
    <link rel="stylesheet" href="./style.css">
    <script type="text/javascript">
        //显示信息
        var log = function(s, type = 'tip') {
            if (s.toString() == '[object Object]' && !type) {
                s = s.s
                type = s.type
            }
            if (document.readyState !== "complete") {
                log.buffer.push({s, type});
            } else {
                if (Array.isArray(s)) {
                    s.forEach(log)
                    return
                }
                document.getElementById("output").innerHTML += (`<p class="${type}">${s}</p><br>`);
                document.getElementById("outputdiv").scrollTop = document.getElementById("outputdiv").scrollHeight;
            }
        }
        log.buffer = [];
        //显示连接状态
        function setConnected(status) {
            document.getElementById("socketstatus").innerHTML = status;
        }
        var ws = null;

        //连接
        function connect() {
            if (ws != null && ws.readyState == WebSocket.OPEN) {
                log("现已连接");
                return ;
            }
            url = "ws://node_ip:port/";
            if ('WebSocket' in window) {
                ws = new WebSocket(url);
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket(url);
            } else {
                alert("您的浏览器不支持WebSocket。");
                return ;
            }
            ws.onopen = function() {
                log("连接打开");
                setConnected("已连接");

                //发送一个字符串和一个二进制信息
                ws.send("subscribe|room2");

                document.getElementById("roomNumKey").innerHTML = "room2";
            }
            ws.onmessage = function(e) {
                console.log(e)
                log(e.data.toString(), 'message');
            }
            ws.onclose = function(e) {
                log("closed");
                console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
                connect();

                //disconnect();
            }
            ws.onerror = function(e) {
                log("error" + e.getAsString());
                connect();
            }
        }

        //断开连接
        function disconnect() {
            if (ws != null) {
                ws.send("unsubscribe|room2");
                ws.close();
                ws = null;
                setConnected("已断开");
            }
        }

        //选择房间,进行信息发送
        function sendByRoom() {
            if (ws != null && ws.readyState == WebSocket.OPEN) {
                var roomNum = document.getElementById("roomNum").value;
                var message = document.getElementById("message").value;
                if (!message) return alert('请输入消息')

                var data = {"roomNum":roomNum, "message":message};

                ws.send("sendByRoom|" + JSON.stringify(data));
            }
        }

        //进行全部fd的广播
        function broadcast() {
            if (ws != null) {
                var message = document.getElementById("message").value;
                if (!message) return alert('请输入消息')
                var data = {"message":message};

                ws.send("broadcast|" + JSON.stringify(data));
            }
        }

        window.onload = function() {
            connect();
            log(log.buffer);

            // 需要增加一个心跳,10秒钟一次
            setInterval(function () {
                if(ws != null && ws.readyState == WebSocket.OPEN) {
                    ws.send("ping");
                }
            }, 10000);
        }
    </script>
</head>
<body onunload="disconnect();">
<div id="outputdiv">
    <div id="output"></div>
</div>
<div class="bottom">
    <div class="status">连接状态：<span id="socketstatus"></span></div>
    <div class="status">你所在的房间：<span id="roomNumKey"></span></div>
    <div class="row">
        <input type="text" id="roomNum" placeholder="Please input roomNum">

        <input type="text" id="message" placeholder="Please input data">
    </div>
    <div class="row">
        <button id="connect" onclick="connect();">连接</button>
        <button id="sendByRoom" onclick="sendByRoom();">按房间号码发送</button>
        <button id="broadcast" onclick="broadcast();">全员广播</button>
        <button id="disconnect" onclick="disconnect();">断开</button>
    </div>
</div>


</body>
</html>